import React, { Component } from 'react';
import PropTypes from 'prop-types';

import MenuBar from './MenuBar';
import Chat from './Chat';
import ChatPanel from './ChatPanel';
import Contact from './Contact';
import UserInfo from './UserInfo';
import SiderMenu from './SiderMenu';
import Conversation from './Conversation';

import './App.css'
import { Layout, Menu, Icon, List, Row, Col } from 'antd';
const { Sider, Content, Header} = Layout;

import { HashRouter as Router, Switch, Route, Link } from 'react-router-dom';

const WrapRoute = ({component : Component, socket, ...rest}) => (
    <Route {...rest} render={props => (
        <Component socket={socket} {...props} />
    )} />
)
class App extends Component {
    render() {
        const { socket } = this.props.location.state;
        return (
            <Layout className='App'>
                <Sider width={70} className='App_Sider'>
                    <SiderMenu />
                </Sider>
                <Content>
                    <Route path='/conversation' render={() => <Conversation socket={socket} />} />
                    <Route path='/contact' component={Contact} />
                </Content>
            </Layout>
        )
    }
}


export default App;
